VS CODE安裝好之後，就可以來認識HTML啦~
開始寫HTML前的步驟
首先，在桌面上新增一個資料夾(可以命名為project)，這個資料夾會存放之後寫的網頁和其他用到的相關檔案。
接著，打開VS CODE。
在VS CODE上新增一個檔案。
新增檔案方式如下:
新增好檔案後，會看到以下的畫面
來試著打些內容看看吧
將此檔案儲存到一開始建立的資料夾內
儲存檔案方式如下:
檔名可以叫index.html (index代表網頁首頁的意思)
儲存完成後就可以看到上面本來寫Untitled-1的地方變成了剛剛儲存的檔案名稱
再來，可以到project資料夾內查看剛剛儲存的檔案是否有成功儲存
將在資料夾內的檔案拖曳到瀏覽器內或是直接點兩下就可以透過預設瀏覽器開啟並看到在index.html檔案內寫的內容了
透過Emmet快速建立HTML語法環境
VS CODE的內建套件Emmet非常方便，讓使用者只要按下 ! +enter
就能快速在VS CODE內建立好HTML語法環境
HTML環境 (HTML Skeleton /BiolerPlate)說明
<!DOCTYPE html>
DOCTYPE 指的是Document Type文件類型，而這行代表的是設定成HTML5
<html lang="en">
這行代表的是使用的語言為英文，可以讓瀏覽器快速地知道網頁使用的語言，若與使用者瀏覽器預設的語言不同，會詢問使用者是否需要翻譯該網頁。
相關參考: HTML Language Code Reference
一個HTML文件內一定要具備head跟body兩個部分
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
head內寫的內容是網頁在加載完畢之後，不會顯示在瀏覽器上的部分。
例如:網頁圖示連結、頁面說明、CSS連結、標題、以及 metadata (有關於該 HTML 的資料，如作者、描述該文件的關鍵詞等)...等。
body內的內容則是會顯示於使用者看到的網頁上。
<title>Document</title>
title內寫的內容則是網站的標題
相關參考:HTML 基礎
<meta charset="UTF-8">
charset 指的是character set
UTF-8 是一種字元編碼，包含世界上幾乎所有存在的字，所以有在網頁上定義UTF-8，幾乎什麼語言都能夠顯示出來，如果沒有定義，就可能會產生亂碼。
相關參考:UTF-8
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport指的是目前眼睛所見的網頁視窗
content="width=device-width, 是定義網頁寬度等於裝置的寬度，讓網頁能夠因應不同裝置來做出不同的調整
initial-scale=1.0 設定視窗是否需要放大或是縮小，設定1.0的話，就是大小不變
<meta http-equiv="X-UA-Compatible" content="IE=edge">
這行是專門為了舊版的IE瀏覽器所寫的 為了讓IE更新到最新
相關參考: What’s in the head? Metadata in HTML
A simple guide to HTML head elements
以上為個人學習筆記整理
若有錯誤，歡迎指正
iThome鐵人賽
看影片追技術